<template>
  <div id="project-container"  class="project-tag">
    <XrHeader :icon-color="labelColor || '#4AB8B8'" :show-search="false" class="xr-header" icon-class="wk wk-label">
      <template v-slot:label>
        <span>{{ labelName }}</span>
        <el-popover v-model:visible="labelSetShow"
                    placement="bottom-start"
                    width="300"
                    trigger="click">
          <div class="new-tag-dialog">
            <div class="title">
              <span>标签设置</span>
              <span class="el-icon-close rt" @click="labelSetShow = false"/>
            </div>
            <div class="search">
              <el-input v-model="editLabelName" size="mini" placeholder="输入标签名"/>
              <span :style="{'background': editLabelColor}" class="checked-color"/>
            </div>
            <div class="color-box">
              <template v-for="(item, index) in colorList" :key="index">
                <span :style="{'background': item}" @click="editLabelColor = item"/>
              </template>
            </div>
            <div class="footer">
              <el-button type="primary" size="medium" @click="labelSetSave">保存
              </el-button>
              <el-button size="medium" @click="labelSetShow = false">取消
              </el-button>
            </div>
          </div>
          <template v-slot:reference>
            <i class="wk wk-manage img-set" @click="labelSetClick"/>
          </template>
        </el-popover>
      </template>
    </XrHeader>
    <div v-loading="loading" class="content">
      <div v-empty="taskList.length == 0 && !loading" class="content-body-items">
        <el-collapse v-model="collapseNames">
          <template v-for="(item, index) in taskList" :key="index">
            <el-collapse-item :name="item.workId" class="list-box">
              <template v-slot:title>
                <i :style="{color : item.color ? item.color : '#4AB8B8'}" class="wukong wukong-subproject"/>
                <span class="title">{{ item.name }}</span>
              </template>
              <template v-for="(taskItem, taskIndex) in item.list" :key="taskIndex">
                <TaskCell :data="taskItem"
                          :data-section="index"
                          :data-index="taskIndex"
                          class="item-list"
                          @on-handle="taskCellHandle"/>
              </template>
            </el-collapse-item>
          </template>
        </el-collapse>
      </div>
    </div>
    <!-- 详情 -->
    <TaskDetail v-if="taskDetailShow"
                ref="particularsRef"
                :id="taskID"
                :detail-index="detailIndex"
                :detail-section="detailSection"
                @on-handle="detailHandle"
                @close="closeBtn"/>
  </div>
</template>

<script setup>
// API
import {
  workTasklableReadAPI,
  workTasklableGetWokListAPI,
  workTasklableSetAPI
} from '/src/api/pm/tag.js'
import {reactive } from "vue"
import TaskCell from '/src/views/pm/components/TaskCell.vue'
import TaskDetail from '/src/views/taskExamine/task/components/TaskDetail.vue'
import XrHeader from '/src/components/XrHeader/index.vue'

const optionData = reactive ({
  loading: true,
  labelId: '',
  taskList: [],
  colorList: [
    '#53D397',
    '#20C1BD',
    '#58DADA',
    '#0FC9E7',
    '#3498DB',
    '#4586FF',
    '#8983F3',
    '#AEA1EA',
    '#FF6699',
    '#F24D70',
    '#FF6F6F'
  ],
  labelName: '',
  labelColor: '#53D397',
  // 展开的面板
  collapseNames: [],
  // 编辑
  editLabelName: '',
  editLabelColor: '',
  labelSetShow: false,
  // 详情数据
  taskID: '',
  detailIndex: -1,
  detailSection: -1,
  taskDetailShow: false
})

const {
  loading,
  labelId,
  taskList,
  colorList,
  labelName,
  labelColor,
  collapseNames,
  editLabelName,
  editLabelColor,
  labelSetShow,
  taskID,
  detailIndex,
  detailSection,
  taskDetailShow
} = toRefs(optionData)

function created() {
  // optionData.labelId = this.$route.params.id
  optionData.labelId = 0
  getDetail({labelId: optionData.labelId})
  getList()
}

created()

onMounted(() => {
  document
      .getElementById('project-container')
      .addEventListener('click', taskShowHandle, false)
})


/**
 * 获取详情
 */
function getDetail(params) {
  workTasklableReadAPI(params).then(res => {
    optionData.labelName = res.data.data.name
    optionData.labelColor = res.data.data.color
  }).catch(() => {
  })
}

/**
 * 页面数据
 */
function getList() {
  optionData.loading = true
  workTasklableGetWokListAPI({
    labelId: optionData.labelId
  }).then(res => {
    optionData.taskList = res.data.data || []
    for (const item of optionData.taskList) {
      for (const i of item.list) {
        if (i.status == 5) {
          i.checked = true
        }
      }
    }
    optionData.collapseNames = res.data.data.map(item => {
      return item.workId
    })
    optionData.loading = false
  }).catch(() => {
    optionData.loading = false
  })
}

/**
 * 标签设置保存
 */
function labelSetSave() {
  workTasklableSetAPI({
    name: optionData.editLabelName,
    labelId: optionData.labelId,
    color: optionData.editLabelColor
  }).then(res => {
    optionData.labelName = optionData.editLabelName
    optionData.labelColor = optionData.editLabelColor
    optionData.labelSetShow = false
  })
}

/**
 * 标签设置
 */
function labelSetClick() {
  optionData.editLabelName = optionData.labelName
  optionData.editLabelColor = optionData.labelColor
}

/**
 * 列表操作
 */
function taskCellHandle(data) {
  if (data.type == 'view') {
    const dataCell = data.data
    optionData.taskID = dataCell.item.taskId
    optionData.detailIndex = dataCell.index
    optionData.detailSection = dataCell.section
    optionData.taskDetailShow = true
  }
}

/**
 * 关闭详情页
 */
function closeBtn() {
  optionData.taskDetailShow = false
}

/**
 * 详情操作
 */
function detailHandle(data) {
  if (data.index == 0 || data.index) {
    // 是否完成勾选
    if (data.type == 'title-check') {
      // .$set(
      //     optionData.taskList[data.section].list[data.index],
      //     'checked',
      //     data.value
      optionData.taskList[data.section].list[data.index]['checked'] = data.value
    // )
    } else if (
        data.type == 'delete' ||
        data.type == 'activate-task' ||
        data.type == 'recover-task' ||
        data.type == 'thorough-delete-task'
    ) {
      optionData.taskList.splice(data.index, 1)
    } else if (data.type == 'change-stop-time') {
      const stopTime = new Date(data.value).getTime() / 1000 + 86399
      if (stopTime > new Date().getTime() / 1000) {
        optionData.taskList[data.section].list[data.index].isEnd = false
      } else {
        optionData.taskList[data.section].list[data.index].isEnd = true
      }
      optionData.taskList[data.section].list[data.index].stopTime = data.value
    } else if (data.type == 'change-priority') {
      optionData.taskList[data.section].list[data.index].priority = data.value.id
    } else if (data.type == 'change-name') {
      optionData.taskList[data.section].list[data.index].name = data.value
    } else if (data.type == 'change-comments') {
      const commentCount = optionData.taskList[data.section].list[data.index]
          .commentCount
      if (data.value == 'add') {
        optionData.taskList[data.section].list[data.index].commentCount =
            commentCount + 1
      } else {
        optionData.taskList[data.section].list[data.index].commentCount =
            commentCount - 1
      }
    } else if (data.type == 'change-sub-task') {
      optionData.taskList[data.section].list[data.index].childWCCount =
          data.value.subdonecount
      optionData.taskList[data.section].list[data.index].childAllCount =
          data.value.allcount
    } else if (data.type == 'change-main-user') {
      optionData.taskList[data.section].list[data.index].mainUser = data.value
    } else if (data.type == 'change-label') {
      optionData.taskList[data.section].list[data.index].labelList = data.value
    }
  }
}

/**
 * 点击空白处关闭详情
 */
const particularsRef = ref()

function taskShowHandle(e) {
  if (
      particularsRef.value &&
      !particularsRef.value.contains(e.target)
  ) {
    let hidden = true
    const items = document.getElementsByClassName('board-column')
    for (let index = 0; index < items.length; index++) {
      const element = items[index]
      if (element.contains(e.target)) {
        hidden = false
        break
      }
    }
    optionData.taskDetailShow = !hidden
  }
}


</script>

<script>


export default {
  components: {
    // TaskDetail,
    // TaskCell,
    // XrHeader
  },
  data() {
    return {}
  },

  beforeRouteUpdate(to, from, next) {
    console.log("Route",to, from ,next)
    // optionData.labelId = to.params.id
    // optionData.taskList = []
    // optionData.collapseNames = []
    // getDetail({labelId: to.params.id})
    // getList()
    // next()
  },


  mounted() {

  },

  methods: {}
}
</script>

<style scoped lang="scss">
.project-tag {
  height: 100%;
  overflow: hidden;
  position: relative;

  .img-set {
    margin-left: 15px;
    font-size: 14px;
    color: #ccc;
    cursor: pointer;
  }

  .img-set:hover {
    color: $xr-color-primary;
  }

  .xr-header {
    padding-top: 0;
  }

  .content {
    background-color: white;
    position: absolute;
    top: 45px;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 3px;
    overflow-y: auto;
    border: 1px solid #e6e6e6;

    .content-body-items {
      height: 100%;
    }

    .el-collapse {
      border: none;
    }

    .el-collapse :deep( .el-collapse-item__wrap) {
      border: 0;
    }

    .el-collapse :deep( .el-collapse-item__header) {
      padding-left: 20px;
      border: 0;

      .el-icon-arrow-right {
        float: none;
        margin: 0;
      }

      .wukong-subproject {
        font-size: 20px;
        margin-right: 5px;
      }

      .title {
        float: left;
        margin-right: 20px;
      }
    }

    .list-box {
      font-size: 14px;
      color: #333;
    }
  }
}

.new-tag-dialog {
  .title {
    padding: 10px;
    border-bottom: 1px solid #E6E6E6;
    margin-bottom: 20px;

    .el-icon-close {
      margin-right: 0;
      cursor: pointer;
    }

    .el-icon-arrow-left {
      cursor: pointer;
    }
  }

  .search {
    position: relative;

    .el-input {
      width: 90%;
      margin: 0 5%;
    }

    .el-input :deep( .el-input__inner) {
      padding-left: 40px;
    }

    .checked-color {
      position: absolute;
      left: 5%;
      top: 0;
      display: inline-block;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      margin: 6px 10px;
    }
  }

  .footer {
    text-align: right;
    margin: 20px;
  }

  .color-box {
    margin: 10px 5%;

    span {
      display: inline-block;
      width: 15px;
      height: 15px;
      margin-right: 8px;
      border-radius: 50%;
      cursor: pointer;
    }

    span:last-child {
      margin: 0;
    }
  }
}
</style>

